
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<title>Weapon Page</title>
<link rel="stylesheet" type="text/css"
	href="<c:url value="/css/tables.css" />" />
<link rel="stylesheet" type="text/css"
	href="<c:url value="/css/button.css" />" />
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<script>

	$(function() {


		$("#dialogDelete").dialog({

			 resizable: false,
			 height:230,
			 width:500,
			autoOpen : false,
			show : {
				effect : "blind",
				duration : 250
			},
			hide : {
				effect : "scale",
				duration : 250
			},
			buttons: {
				 "Delete Weapon": function() {


			        var e = document.getElementById("weaponSelect");
					var weaponValue = e.options[e.selectedIndex].value;
					
				  $.post("http://127.0.0.1:8080/fight-robot/weapon-service/deleteWeapon", { weaponId: weaponValue} );
				
					
				$( this ).dialog( "close" );
				 
				 },
				 Cancel: function() {
				 $( this ).dialog( "close" );
				 }
			},
			close: function() {

        		   location.reload(true);
    		}
		
		});
		$("#buttonDelete").click(function() {
			$("#dialogDelete").dialog("open");
		});
	});

	$(function() {
		$("#dialogCreate").dialog({
			resizable: false,
			 height:320,
			 width:500,
			autoOpen : false,
			show : {
				effect : "clip",
				duration : 250
			},
			hide : {
				effect : "scale",
				duration : 250
			},
			 buttons: {
				 "Create new Weapon": function() {

				  $.post("http://127.0.0.1:8080/fight-robot/weapon-service/createWeapon", { weaponName:$(weaponname).val(), weaponPower: $(weaponpower).val(),weaponHits: $(weaponhits).val()} );

				
				   $( this ).dialog( "close" );


			
				},


				 Cancel: function() {
				 $( this ).dialog( "close" );
				 }
			},
			close: function() {
        		   location.reload(true);
    		}
		});
		$("#buttonCreate").click(function() {
			$("#dialogCreate").dialog("open");
		});
	});

		$(function() {

			var table = document.getElementById('tableID'), cells = table
									.getElementsByTagName('td');

			//alert(table.rows[1].cells[1].innerHTML);
		//var e = table.rows[1].cells[1].innerHTML;

		//alert(e);
		

		//;


		$("#dialogEdit").dialog({
			resizable: false,
			 height:320,
			 width:500,
			autoOpen : false,
			show : {
				effect : "clip",
				duration : 250
			},
			hide : {
				effect : "scale",
				duration : 250
			},
			 buttons: {
				 "Edit Weapon": function() {
				 	var e = document.getElementById("weaponSelect");
					var weaponValue = e.options[e.selectedIndex].value;
	
				  $.post("http://127.0.0.1:8080/fight-robot/weapon-service/editWeapon", { weaponId : weaponValue, weaponName:$(weaponnameEdit).val(), weaponPower: $(weaponpowerEdit).val(),weaponHits: $(weaponhitsEdit).val()} );

				
				   $( this ).dialog( "close" );


			
				},




				 Cancel: function() {
				 $( this ).dialog( "close" );
				 }
			},
			close: function() {
			
        		   location.reload(true);
    		},
    		open: function(){
    			$("#weaponnameEdit").val(table.rows[1].cells[1].innerHTML);
    			$("#weaponpowerEdit").val(table.rows[1].cells[2].innerHTML);
    			$("#weaponhitsEdit").val(table.rows[1].cells[3].innerHTML);

    		}
		});
		$("#buttonEdit").click(function() {
			$("#dialogEdit").dialog("open");
		});
	});

	function displayWeapon() {

		var e = document.getElementById("weaponSelect");
		var weaponValue = e.options[e.selectedIndex].value;
		$
				.get(
						'http://127.0.0.1:8080/fight-robot/weapon-service/getWeapon?weaponId='
								+ weaponValue,
						function(data) {
							if (!data || data === "") {
								// error
								return;
							}
							var foundWeapon;
							try {
								foundWeapon = jQuery.parseJSON(data);
							} catch (e) {
								// error
								return;
							}
							var table = document.getElementById('tableID'), cells = table
									.getElementsByTagName('td');

							table.rows[1].cells[0].innerHTML = foundWeapon.idWeapon;
							table.rows[1].cells[1].innerHTML = foundWeapon.name;
							table.rows[1].cells[2].innerHTML = foundWeapon.power;
							table.rows[1].cells[3].innerHTML = foundWeapon.hits;

						}, "text");
	}
</script>
</head>
<body>
	<center>
		<select name='weaponSelect' id='weaponSelect'
			onchange="displayWeapon()">
			<!--     			 <option value="${weaponSelected}" selected>${selected}</option>   -->
			<option selected="" value=""></option>
			<c:forEach var="weapon" items="${weaponmap}">
				<option value="${weapon.key}">${weapon.value}</option>
			</c:forEach>
		</select></br>


		<table id='tableID'>
			<thead>
				<tr>
					<th>Id</th>
					<th>Name</th>
					<th>Power</th>
					<th>Hits</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</tbody>
		</table>

		<button type="button" id="buttonCreate" class="button medium green">Create
			Weapon</button>
		<button type="button" id="buttonEdit" class="button medium yellow">Edit
			Weapon</button>
		<button type="button" id="buttonDelete" class="button medium red">Delete
			Weapon</button>

	</center>




	<!-- <button id="opener">Open Dialog</button> -->
</body>
<div id="dialogDelete" title="Delete Weapon">
	<p>Are you sure you want to proceed? Changes could not be undone!</p>

</div>

<!-- Dialog Create -->
<div id="dialogCreate" title="Create new Weapon">
	<form>
		<fieldset>
			<label for="name">Name </label> <input type="text" name="name"
				id="weaponname" class="text ui-widget-content ui-corner-all" /> <br> <br>
			<label for="power">Power</label> <input type="text" name="power" id="weaponpower"
				value="" class="text ui-widget-content ui-corner-all" /> <br> <br>
			<label for="hits">Hits  </label> <input type="text" name="hits" id="weaponhits"
				value="" class="text ui-widget-content ui-corner-all" /> <br>
		</fieldset>
	</form>
</div>


<!-- Dialog Edit  -->

<div id="dialogEdit" title="Edit Weapon">
	<form>
		<fieldset>
			<label for="name">Name </label> <input type="text" name="name"
				id="weaponnameEdit" class="text ui-widget-content ui-corner-all" /> <br> <br>
			<label for="power">Power</label> <input type="text" name="power" id="weaponpowerEdit"
				value="" class="text ui-widget-content ui-corner-all" /> <br> <br>
			<label for="hits">Hits  </label> <input type="text" name="hits" id="weaponhitsEdit" 
				value="" class="text ui-widget-content ui-corner-all" /> <br>
		</fieldset>
	</form>
</div>

	


</html>